<template>
     <div id="addFill">
        <div class="jx-content part1">
             <el-form :inline="true" class="demo-form-inline clearfix" :model="form">
                <el-form-item label="年份 ：">
                  <el-input-number v-model="form.num8" controls-position="right"  @change="handleChange" :min="2010" :max="2019"></el-input-number>
                </el-form-item>
                <el-form-item label="班级 ：">
                    <el-select v-model="form.chooseClass" placeholder="请选择班级">
                        <el-option
                        v-for="item in form.optionsclass"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态 ：">
                    <el-select v-model="form.choosestatus" placeholder="请选择状态">
                        <el-option
                        v-for="item in form.optionstatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        ></el-option>
                    </el-select>
                 </el-form-item>
                 <el-form-item >
                    <div class="button-style" @click="search">搜 索</div>
                </el-form-item>
                <el-form-item class="fr">
                    <a class="button-style">下 载 报 告</a>
                </el-form-item>
             </el-form>
                 <div class="tips"> 注：此列表按照默认班级检索</div>
         </div>
        <div class="jx-content part2" style="padding:20px 0">
            <div class="jx-title-box">
                <div class="fl jx-blueStreak"></div>
                <div class="fl jx-titleText">xxxx班级数据统计</div>
            </div>
            <div class="teach-box">
                <el-row>
                    <el-col :span="6">
                        <span class="col-num">00000</span>
                        <span class="col-text">学习人数</span>
                    </el-col> 
                     <el-col :span="6">
                        <span class="col-num">00000</span>
                        <span class="col-text">提问问题数</span>
                    </el-col> 
                     <el-col :span="6">
                        <span class="col-num">00000</span>
                        <span class="col-text">回答问题数</span>
                    </el-col> 
                     <el-col :span="6">
                        <span class="col-num">00000m</span>
                        <span class="col-text">实验总时长</span>
                    </el-col> 
                     <el-col :span="6">
                        <span class="col-num">00000m</span>
                        <span class="col-text">实验平均时长</span>
                    </el-col> 
                </el-row>
            </div>
            <div class="teach-box-bot">
                <el-row>
                    <el-col :span="6">
                        <span class="col-num">00000</span>
                        <span class="col-text">考试次数</span>
                    </el-col> 
                     <el-col :span="6">
                        <span class="col-num">00000</span>
                        <span class="col-text">每次考试平均成绩</span>
                    </el-col> 
                     <el-col :span="6">
                        <span class="col-num">00000</span>
                        <span class="col-text">课堂提问次数</span>
                    </el-col> 
                     <el-col :span="6">
                         <div class="fl" style="width:95px;">
                            <PieEcharts :id='id' :color='color'  :datalist='passRate'  style="width:100%;;height:70px; "></PieEcharts>
                        </div>
                         <div class="fl jx-pass">
                             <p class="jx-pass-num">{{''+passRate == 0 ? (0+'%') : passRate+'%'}}</p>
                             <p class="jx-pass-over">考试及格率</p>
                         </div>
                    </el-col> 
                     <el-col :span="6">
                         <div class="fl" style="width:95px;">
                             <PieEcharts :id='workid' :color='passworkcolor'  :datalist='passwork'  style="width:100%;;height:70px; "></PieEcharts>
                        </div>
                         <div class="fl jx-pass">
                             <p class="jx-pass-num" style="color:#5689f2">{{''+passwork == 0 ? (0+'%') : passwork+'%'}}</p>
                             <p class="jx-pass-over">作业提交率</p>
                         </div>
                    </el-col> 
                      <el-col :span="6">
                         <div class="fl" style="width:95px;">
                             <PieEcharts :id='reportid' :color='passreportcolor'  :datalist='passreport'  style="width:100%;;height:70px; "></PieEcharts>
                         </div>
                         <div class="fl jx-pass">
                             <p class="jx-pass-num" style="color:#f07f9b">{{''+passreport == 0 ? (0+'%') : passreport+'%'}}</p>
                             <p class="jx-pass-over">考试及格率</p>
                         </div>
                    </el-col> 
                </el-row>
            </div>
            <div class="jx-title-box">
                <div class="fl jx-blueStreak"></div>
                <div class="fl jx-titleText">学生列表</div>
            </div>
            <div class="jx-content">
                 <el-table :data="tableData" style="width: 100%">
                    <el-table-column  type="index" label="序号">
                         <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span> </template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="number" label="学号" ></el-table-column>
                    <el-table-column prop="lainxi" label="随堂练习"></el-table-column>
                    <el-table-column prop="baogao" label="实验报告"></el-table-column>
                    <el-table-column prop="num" label="旷课总次数" >
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.num"   @change="handleChange" :min="0" :max="100" label="旷课次数" style="padding-left:20px;"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="n2"  label="考试次数"></el-table-column>
                    <el-table-column  prop="chengji"  label="考试成绩" ></el-table-column>
                    <el-table-column prop="jianda" label="随堂提问-简答题" ></el-table-column>
                    <el-table-column  prop="panduan" label="随堂提问-判断题" ></el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                 ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import PieEcharts from '@/components/PieEcharts.vue'
    export default {
        components: {
            PieEcharts
        },
        data () {
            return {
                //考试及格率
                passRate:10,
                id:'teachingecharts',
                color:'#13c2c2',
                //作业提交率
                passwork:30,
                passworkcolor:'#5689f2',
                workid:'workecharts',
                 //实验报告提交率
                passreport:50,
                passreportcolor:'#f07f9b',
                reportid:'examcharts',
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                tableData: [
                        {
                        name: "王小虎",
                        number: "20160502",
                        lainxi: "30",
                        baogao: "laiyuan",
                        num: "10",
                        n2: "2",
                        chengji:" 50 100 50 10 50",
                        jianda: "50优 50中 50差 ",
                        panduan: "50对  50错"
                        },
                        
                ],
                form:{
                   num8: 2010,
                   chooseClass:'',
                   optionsclass:[{
                        value: '选项1',
                        label: '黄金糕1'
                        }, {
                        value: '选项2',
                        label: '双皮奶1'
                        }
                   ],
                   choosestatus:'',
                   optionstatus:[
                       { value: '选项3',
                        label: '黄金糕'
                        }, {
                        value: '选项4',
                        label: '双皮奶'
                        }
                   ],
                }
                
            }
        },
        mounted () {
            
        },
        methods: {
            //计数
             handleChange(n) {
                console.log(n);
            },
            //搜索
            search(){
              
            },
            //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                //this.init()
            },
           
         }
        
    }
</script>
<style scoped>

    .table>>>tr:hover>td {
        background-color: #ffff !important;
     }
    .el-select>>>.el-input__icon{
        line-height: 32px;
    }
    .el-input-number>>>.el-input__inner{
        height: 40px;
        padding-right: 35px;
        padding-left: 0;
    }
    .el-table__row  .el-input-number>>>.el-input__inner{
        border: none;
    }
    .el-table__row  .el-input-number>>>.el-input-number__decrease, .el-table__row  .el-input-number>>>.el-input-number__increase{
         height: 17px;
         width: 17px;
        border-radius: 50%;
        border: 1px solid #dcdfe6;
        top: 10px;
    }
    .el-table__row  .el-input-number>>>.el-input-number__decrease{
       left: 80px;
    }
    .el-table__row  .el-input-number>>>.el-input-number__increase{
       right: 90px;
    }
    .el-table__row   .el-input-number>>>[class*=" el-icon-"],.el-table__row  .el-input-number>>> [class^=el-icon-]{
        position: absolute;
        left: 2px;
        top: 2px;
    }
</style>
<style scoped>
   .el-input-number.is-controls-right>>>.el-input-number__increase{
        line-height: 16px;
    }
    .el-input-number{
        position: relative;
        display: inline-block;
        line-height: 38px;
        overflow: hidden;
        width: auto;
    }
    .el-input-number>>>.el-input-number__increase{
        top: 4px;
    }
    .el-input-number.is-controls-right>>>.el-input-number__decrease{
         bottom: 4px;
    }
    .el-input-number>>>.el-input .el-input__inner{
        width: 100px;
    }
   
    
</style>

<style lang="scss" scoped>
 @import "./../../../styles/layout/color_variables";

  #addFill {
    width: $width;
    margin: 20px auto;
    color: #727272;
    .part1{
        .el-form-item{
             margin-bottom:0px;
         }
        .tips{
            margin-left: 10px;
            color: #1277eb;
        } 
    }
    .part2{
          .jx-title-box{
            color:$blue;
            line-height: 15px;
            text-align: left;
            height: 15px;
            font-size: $fs16;
            padding: 10px 0;
            .jx-blueStreak{
                background: $blue;
                width: 2px;
                float: left;
                height: 15px;
                padding: 0;
            }
            .jx-titleText{
                padding-left:40px;
                width: auto;
            }
        }
        .teach-box{
            padding:30px 30px 0px 30px;
            .el-row .el-col{
                text-align: center;
                width: 20%;
                border-right: solid 1px $border-gray;
                &:last-child{
                   border-right: none
                }
            }
            .col-num{
                display: block;
                color: #1277eb;
                overflow: hidden;
                text-overflow:ellipsis;
                text-align: center;
                font-size: $fs24
            }
            .col-text{
                color: $table-gray
            }
        }
        .teach-box-bot{
            padding: 30px;
         
            .el-row {
                padding-top: 30px;
                border-top: solid 1px $border-gray;
                 .el-col{
                    text-align: center;
                    width: 16%;
                    border-right: solid 1px $border-gray;
                    &:last-child{
                       border-right: none
                    }
                }
                .col-num{
                   display: block;
                   color: #1277eb;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    text-align: center;
                    font-size: $fs24
                }
                .col-text{
                   color: $table-gray
                }
                .jx-pass{
                    margin-top:10px;
                    text-align: left;
                    .jx-pass-num{
                       color: #13c2c2;
                       font-size: $fs24
                    }
                    .jx-pass-over{
                       color: $table-gray;
                       margin-top: 10px;
                    }
                }
             }
           
            
        }
    }
   
  }
</style>